<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS的编写位置</title>

    <!-- 
        2. 内部样式表
            - 可以将样式编写到head中的style元素里
            - 通过选择器可以同时为多个元素设置样式，
                减少css的代码量，方便代码的后期维护
     -->
     <!-- <style>
        h1 {
            color: red;
        }

        p {
            color: blue;
            font-size: 50px;
            background-color: yellow;
        }
     </style> -->

     <!-- 
        3. 外部样式表
            - 可以将css样式编写到外部的css文件中
                然后通过link标签将外部的文件引入到当前页面中
            - 外部样式表可以在不同的页面中进行复用，
                并且将html和css完全分离，是我们开发中首选方式
      -->
      <link rel="stylesheet" href="./style.css">
</head>
<body>
    <h1>论语十则</h1>
    <!-- 
        1.内联样式（行内样式）
            将样式编写到标签的style属性中
            - 在开发中不推荐使用这种方式

     -->
    <!-- <p style="color: skyblue; font-size: 40px; background-color: yellow;">学而时习之，不亦说乎</p>
    <p style="color: skyblue; font-size: 40px; background-color: yellow;">逝者如斯夫，不舍昼夜</p> -->

    <p>人不知而不愠，不亦君子乎</p>
    <p>人不知而不愠，不亦君子乎</p>
    <p>人不知而不愠，不亦君子乎</p>
    <p>三人行必有我师焉</p>
</body>
</html>